import { reqLogin, reqUserInfo, reqLogout } from '@/API/user/index.js'
import { loginResponseData, loginFormData, userInfoReponseData } from '@/API/user/type.js'
import { cloneDeep } from 'lodash'
import { defineStore } from 'pinia'
import { ref } from 'vue'
// 引入路由(长两个路由)
import { constantRoute, asnycRoute, anyRoute } from '@/router/routes.js'
import router from '@/router/index.js'

export function filterAsyncRoute(asnycRoute: any, routes: any) {
  return asnycRoute.filter((item: any) => {
    if (routes.includes(item.name)) {
      if (item.children && item.children.length > 0) {
        //硅谷333账号:product\trademark\attr\sku
        item.children = filterAsyncRoute(item.children, routes)
      }
      return true
    }
  })
}
const useUserStore = defineStore(
  'User',

  () => {
    /* 组合式写法
        数据就直接写
        方法则是通过给函数写成async异步函数
        计算属性则是跟V3组合式一样的写法
        let然后computer(cb)再返回值.
        最后暴露数据等等
    */

    const token = ref('')
    const username = ref('')
    const avatar = ref('')
    const buttons = ref([])

    /* 仓库存储生成菜单需要的数组|(路由) */
    const menuRoutes = ref()
    async function userLogin(data: loginFormData) {
      const result: loginResponseData = await reqLogin(data)
      console.log(result)
      // 登录请求,成功->token,要存 储我们的token值
      // 失败->201->登录失败错误信息
      if (result.code == 200) {
        token.value = result.data
        localStorage.setItem('token', result.data)
        /* 现在的数据并不是持久化的,因为pinia的数据存储其实是利用js对象,所以刷新就没了 
         本地存储持久化存储一份
         保证当前async函数返回一个成功的Promise并且给予其值
         */
        return 'OK '
      } else {
        /* 返回一个错误状态的Promise */
        return Promise.reject(new Error(result.data))
      }
    }
    /* 代解决问题,单点登录后我们的路由地址只有我们的常量路由地址. */
    async function userInfo() {
      const result: userInfoReponseData = await reqUserInfo()

      /* 如果没有我们不去写return的话,我们默认返回的都是Undefined,也就是成功,所以我们手动+一个返回成功信息和错误的提示+信息 */
      if (result.code == 200) {
        username.value = result.data.name
        avatar.value = result.data.avatar
        buttons.value = result.data.buttons
        const resultRouter = filterAsyncRoute(cloneDeep(asnycRoute), result.data.routes)
        menuRoutes.value = [...constantRoute, ...resultRouter, anyRoute]
        ;[...resultRouter, anyRoute].forEach((route) => {
          router.addRoute(route)
        })

        return 'ok'
      } else {
        return Promise.reject(new Error(result.message))
      }
    }
    async function Logout() {
      token.value = ''
      username.value = ''
      avatar.value = ''
      /* 初始化我们的路由菜单,防止我们的路由表出现bug导致的上一个用户的路由权限有的页面遗留到下一个用户第一次登录页面可以登录到重定向的非该用户的权限路由 */
    }
    return { userLogin, userInfo, Logout, token, username, avatar, menuRoutes, buttons }
  },
  {
    persist: { paths: ['token', 'username', 'avatar', 'menuRoutes'] }
    //参数持久化
  }
)
export default useUserStore
